<template>
    <div style="width: calc( 100% - 143px );">
        <switch-time :switchTime="tempTime" @update:switchTime="onSwitchTime" />
        <el-form-item label="切换动画">
            <el-select class="switch-animates" size="mini" v-model="tempAnimates"><el-option v-for="(item, idx) in list" :key="idx" :label="item.label" :value="item.value"></el-option></el-select>
        </el-form-item>
    </div>
</template>

<script>
import switchTime from '@/components/program-editor/props-attr/switch-time';
import { animateGroup } from '@/assets/animate-data';
import { mapActions, mapGetters } from 'vuex';
export default {
    name: 'attr-sxc-switchAnimate',
    components: {
        switchTime
    },
    model: {
        prop: 'value',
        event: 'update'
    },
    props: {
        value: {
            type: Object,
            default() {
                return {
                    imgSwitchTime: 0,
                    imgAnimates: ''
                };
            }
        }
    },
    data() {
        return {
            tempTime: this.value.imgSwitchTime,
            list: animateGroup,
            tempAnimates: this.value.imgAnimates
        };
    },
    computed: {
        ...mapGetters('programs', ['currScene'])
    },
    watch: {
        value(v1, v2) {
            this.tempTime = v1.imgSwitchTime;
            this.tempAnimates = v1.imgAnimates;
            // this.initData()
        },
        tempTime() {
            this.change();
        },
        tempAnimates() {
            this.change();
        }
    },
    mounted() {
        this.initData();
    },
    methods: {
        ...mapActions('programs', ['setDurationLen']),
        initData() {
            this.tempTime = this.value.imgSwitchTime;
            this.tempAnimates = this.value.imgAnimates;
        },
        change() {
            this.$emit('update', {
                imgSwitchTime: this.tempTime,
                imgAnimates: this.tempAnimates
            });
            this.setDurationLen(this.tempTime * 1);
        },
        onSwitchTime(val) {
            let that = this;
            this.tempTime = val;
            this.$emit('changeTime');
        }
    }
};
</script>

<style lang="scss" scoped>
.attr-item-edit-wrapper .attr-item-edit-input.col-2 {
    margin-left: 0px;
}
</style>
